<template>
    <div id='myChart' ref="myChart" style="width: 100%;height: 100%"></div>
</template>

<script>
    export default {
        props: {
            data: {
                type: Number,
                default() {
                    return {};
                },
            },
        },
        data () {
            return {
                chartData:[],
            }
        },
        mounted () {
            this.chartData.push(...this.chartData,this.data);
            this.drawChart();
        },
        methods: {
            drawChart () {
                const { myChart } = this.$refs;
                if (myChart) {
                    const thisChart = this.$echarts.init(myChart);
                    const option = {
                        series: [{
                            type: 'liquidFill',
                            name: '', // 系列名称，用于tooltip的显示，legend 的图例筛选
                            radius: '66', // 水球图的半径
                            center: ['50%', '50%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
                            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
                            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
                            shape: 'circle',
                            phase: 0, // 波的相位弧度 不设置  默认自动
                            direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
                            outline: {
                                show: true,
                                borderDistance: 0, // 边框线与图表的距离 数字
                                itemStyle: {
                                    opacity: 1, // 边框的透明度   默认为 1
                                    borderWidth: 1, // 边框的宽度
                                    // shadowBlur: 10, // 边框的阴影范围 一旦设置了内外都有阴影
                                    // shadowColor: '#fff', // 边框的阴影颜色,
                                    borderColor: '#104C9D' // 边框颜色
                                }
                            },
                            // 图形样式
                            itemStyle: {
                                color: '#4077eb', // 水球显示的背景颜色
                                opacity: 0.5, // 波浪的透明度
                                shadowBlur: 10 // 波浪的阴影范围
                            },
                            backgroundStyle: {
                                color: '#407bf3', // 水球未到的背景颜色
                                opacity: 0.5
                            },
                            // 图形的高亮样式
                            emphasis: {
                                itemStyle: {
                                    opacity: 0.8 // 鼠标经过波浪颜色的透明度
                                }
                            },
                            // 图形上的文本标签
                            label: {
                                fontSize: 18,
                                fontWeight: 300,
                                color: '#fff'
                            },
                            data: this.chartData // 系列中的数据内容数组
                        }]
                    };
                    thisChart.setOption(option);
                    window.addEventListener('resize', () => {
                        thisChart.resize();
                    })
                }
            }
        }
    }
</script>

